<style lang="scss" scoped>
  .child-nav {
    .item {
      display: inline-block; padding: 5px 15px; border-radius: 4px; background: #f2f2f2;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
      &.active {
        background: $primary-color; color: #fff; line-height: 1.3;
      }
    }
  }
</style>
<template>
  <div class="child-nav">
    <router-link class="item" active-class="active" tag="div" v-for="(item, index) in childMenu" :key="index" :to="getPath(item)">
      {{item.title}}
    </router-link>
  </div>
</template>

<script>
  function getPath (item) {
    if (item.path) {
      return item.path
    } else if (item.children && item.children.length) {
      return getPath(item.children[0])
    } else {
      return ''
    }
  }
  export default {
    name: 'common-child-nav',
    computed: {
      childMenu () {
        return this.$store.state.ec.menu.aside
      }
    },
    methods: {
      // 获取跳转链接，如果有子菜单，逐级往下找，直到找到第一个具体有链接的子菜单
      getPath (item) {
        return getPath(item)
      }
    }
  }
</script>
